<template>
    <div class="slow-query-logs">
      <h1>慢查询日志</h1>
      <el-table :data="logs" style="width: 100%">
        <el-table-column prop="query" label="查询语句" ></el-table-column>
        <el-table-column prop="type" label="查询类型" width="150"></el-table-column>
        <el-table-column prop="duration" label="查询耗时(ms)" width="150"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button size="small" @click="handleDelete(row)">删除日志</el-button>
            <el-button size="small" type="primary" @click="handleDownload(row)">下载日志</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  
  interface LogEntry {
    query: string;
    type: string;
    duration: number;
  }
  
  const logs = ref<Array<LogEntry>>([]);
  const loading = ref(false);
  const error = ref('');
  
  const fetchLogs = async () => {
    try {
      loading.value = true;
      // 模拟从服务器获取慢查询日志
      await new Promise(resolve => setTimeout(resolve, 2000));
      logs.value = [
        { query: "GET key1", type: "String", duration: 500 },
        { query: "HGETALL key2", type: "Hash", duration: 450 },
        { query: "ZRANGE key3 0 10", type: "Sorted Set", duration: 600 },
      ];
    } catch (e) {
      error.value = '获取慢查询日志失败';
    } finally {
      loading.value = false;
    }
  };
  
  const handleDelete = (row: LogEntry) => {
    alert(`删除日志: ${row.query}`);
    // 这里可以调用 API 删除对应的慢查询日志
  };
  
  const handleDownload = (row: LogEntry) => {
    alert(`下载日志: ${row.query}`);
    // 这里可以调用 API 下载对应的慢查询日志
  };
  
  onMounted(() => {
    fetchLogs();
  });
  </script>
  
  <style scoped>
  .slow-query-logs {
    /* 样式 */
  }
  </style>